<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改角色')" />
    <th:block th:include="include :: ztree-css" />
    <th:block th:include="include :: header('日期和时间')" />
    <th:block th:include="include :: datetimepicker-css" />
    <script th:inline="javascript"> var ctx = [[@{/}]]; </script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-role-edit" th:object="${lab}">
        <input id="roleId" name="id" type="hidden" th:value="*{id}"/>
        <input id="labId" name="labId" type="hidden" th:value="*{id}">
        <div class="form-group">
            <label class="col-sm-3 control-label ">实验室名称：</label>
            <div class="col-sm-7">
                <input class="form-control" type="text" name="labName" id="labName" required th:value="*{labName}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">实验室编号：</label>
            <div class="col-sm-7">
                <input class="form-control" type="text" name="labCode" id="labCode" required th:value="*{labCode}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">实验室地址：</label>
            <div class="col-sm-7">
                <input class="form-control" type="text" name="labAddress" id="labAddress" required th:value="*{labAddress}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">负责人：</label>
            <div class="col-sm-7">
                <input class="form-control" type="text" name="labCreater" id="labCreater" required th:value="*{labCreater}">
            </div>
        </div>
        <div class="form-group" style="float: right">
            <a class="btn btn-primary btn-rounded btn-sm" onclick="submitHandler()" ><i class="fa fa-search"></i>修改</a>
        </div>

        <select id="select" name="firstCouretime" class="form-control m-b" th:with="type=${@classTime.selectTbClassTimeList()}" style="width:120px;display: none;" hidden="hidden">
            <option th:each="classtime : ${type}" th:text="${classtime.section}" th:value="${classtime.sectionNumber}"></option>
        </select>
        <!--<div class="form-group">
            <label class="col-sm-3 control-label ">开始时间：</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="labStartTime" placeholder="yyyy-MM-dd HH:mm:ss" name="labStartTime">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">结束时间：</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="labEndTime" placeholder="yyyy-MM-dd HH:mm:ss" name="labEndTime">
            </div>
        </div>-->
       <!-- <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="add()">
                <i class="fa fa-plus"></i> 添加开放时间
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
                <i class="fa fa-remove"></i> 删除
            </a>
        </div>-->
        <div class="col-sm-12 select-table table-striped" id="table1">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>日期：</p>
                            <input type="text" name="orderTime" id="orderTime" class="form-control" placeholder="yyyy-MM-dd"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                        <li></li>
                        <li></li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="changeRow()"><i class="fa fa-edit"></i>添加开放日期</a>
                        </li>
                    </ul>
                </div>
            </form>
            <table id="bootstrap-table">
            </table>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: ztree-js" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var id=$("#roleId").val();
    var prefix=ctx+"lab";
    $(function() {
        var options = {
            url: prefix + "/list2",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            uniqueId: "userId",
            width: 800,
            columns: [{
                checkbox: true
            },
                {
                    field: 'orderTime',
                    title: '日期',
                    formatter:function (value,row,index) {
                        var index=value.indexOf(" ");
                        return value.substring(0,index);
                    }
                },
                {
                    field: 'statues',
                    title: '节次选择状况(可重新选择实验室开放的时间节次信息)',
                    formatter: function (value,row,index) {
                         var array=new Array();
                         array=value.split(",");
                         var array2=new Array();
                         array2=row.sections.split(",");
                         var message='';
                         for(var i=0;i<array.length;i++){
                             if(array[i]==0){
                                 message+="第"+array2[i]+"节<input type='checkbox' name='check"+index+"' value='"+array2[i]+"'>可添加"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                             }else if(array[i]==1){
                                 message+="第"+array2[i]+"节<input type='checkbox' name='check"+index+"' value='"+array2[i]+"' checked disabled>已有预约不可修改"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                             }else if(array[i]==2){
                                 message+="第"+array2[i]+"节<input type='checkbox' name='check"+index+"' value='"+array2[i]+"' checked>无实验室预约"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                             }
                         }
                         return message;
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="change(\'' + row.orderTime +","+index+'\')"><i class="fa fa-edit"></i>确定修改</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="deleteTime(\'' + row.orderTime +'\')"><i class="fa fa-remove"></i>删除</a> ');
                        return actions.join('');
                    }
                }
            ]};
            $.table.init(options);
    });
    function change(time) {
        var index = time.indexOf(",")
        console.log(time)
        var row = time.substring(index + 1, time.length);
        var time1 = time.substring(0, index);
        var a = "check" + row;
        var checkID = '';//定义一个空字符串,用来存放修改的节次信息
        var id = $("#roleId").val();//用来存放实验ID
        $('input[name=\'' + a + '\']:checked').each(function (i) {
            checkID += $(this).val();
        });
        console.log(checkID);
        $.ajax({
            cache: true,
            type: "get",
            url: ctx + "lab/editadd",
            data: {
                "mess": checkID + "," + time1 + "," + id,
            },
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.modal.alertSuccess("修改成功");
                $.table.refresh()
            }
        })
    }


    function deleteTime(time){
         //获取到具体的实验室id
        var id=$("#roleId").val()
        console.log(time);
        $.ajax({
            url : ctx + "lab/deleteLabDate",
            type : 'delete',
            data : {"labId":id,"orderTime":time},
            success : function(data){
                if (data.code==0){
                    $.modal.alertSuccess(data.msg);
                    $.table.refresh()
                }else{
                    $.modal.alertError(data.msg);
                    $.table.refresh()
                }
            }
        })
    }

    $(function () {
         $("#orderTime").datetimepicker({
             format: "yyyy-mm-dd",
             startView: 2,
             minView: "month",
             autoclose: true
         })
    })

    function edit() {
        var id = $("input[name='id']").val();
        var labName = $("input[name='labName']").val();
        var labCode = $("input[name='labCode']").val();
        var labAddress = $("input[name='labAddress']").val();
        var labStartTime = $("input[name='labStartTime']").val();
        var labEndTime = $("input[name='labEndTime']").val();
        var labCreater= $("input[name='labCreater']").val();
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "lab/edit",
            data : {
                "id": id,
                "labName": labName,
                "labCode": labCode,
                "labAddress": labAddress,
                /*"labStartTime": labStartTime,
                "labEndTime": labEndTime,*/
                "labCreater":labCreater
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.operate.successCallback(data);
            }
        });
    }

    function submitHandler() {
        if ($.validate.form()) {
            edit();
        }
    }

    var random=1;
    //在当前基础上再添加实验室开放日期
    function changeRow() {
          //去掉原先的表格及页码等
          $(".fixed-table-pagination").remove();
          $("#bootstrap-table").remove();
          $(".select-list").remove()
          //添加的内容
          var message="<table class=\"table\">\n" +
              "                <thead>\n" +
              "                    <tr>\n" +
              "                        <td>开放时间</td>\n" +
              "                        <td>结束时间</td>\n" +
              "                        <td>起始/结束节</td>\n" +
              "                        <td>备注</td>\n" +
              "                        <td>操作</td>\n" +
              "                    </tr>\n" +
              "                </thead>\n" +
              "                <tbody>\n" +
              "                    <tr>\n" +
              "                        <td><input class=\"form-control\" name=\"experimentBeginDate\"  id=\"datetimepicker-demo-\" type=\"text\" placeholder='yyyy-MM-dd' onclick='fuzhi()'/></td>\n" +
              "                        <td><input class=\"form-control\" name=\"experimentendtDate\"  id=\"datetimepicker-demo\" type=\"text\" placeholder='yyyy-MM-dd' onclick='fuzhi2()'/></td>\n" +
              "                        <td>"+aaa()+"</td>\n" +
              "                        <td><input class=\"form-control\" type=\"text\" id='remark' name=\"remark\" style=\"width:120px;\"/></td>\n" +
              "                        <td><a class=\"btn btn-primary btn-rounded btn-sm\" onclick=\"insertMessage()\"><i class=\"fa fa-edit\"></i>确定添加</a></td>\n" +
              "                    </tr>\n" +
              "                </tbody>\n" +
              "            </table>";
          $("#table1").append(message)
          fuzhi();
          fuzhi2();
          random++;
    }

    function fuzhi() {
        $("#datetimepicker-demo-").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    }
    function fuzhi2() {
        $("#datetimepicker-demo").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    }

    /**
     * 获取节次信息
     * @returns {string}
     */
    function aaa(){
        var channelArr= new Array();
        var channelArrvals= new Array();
        var channel=$("#select").find("option");
        for(var i=0;i<channel.length;i++) {
            var channlVar = channel.eq(i).text();//option中的值
            var channelArrval = channel.eq(i).val();//option中的值
            channelArr.push(channlVar);
            channelArrvals.push(channelArrval);
        }
        var a="<div style=\"display:flex;\"><select name=\"sectionBegin\" id='sectionBegin' class=\"form-control m-b\" style=\"width:100px;\" >";
        for(var i = 0; i <channelArr.length; i++){
            a=a+("<option value='"+channelArrvals[i]+"'>"+channelArr[i]+"</option>");
        }
        a=a+("</select>")
        a=a+("<span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>")
        a=a+"<select name=\"sectionEnd\" class=\"form-control m-b\" id='sectionEnd' style=\"width:100px;\">";
        for(var i = 0; i <channelArr.length; i++){
            a=a+("<option value='"+channelArrvals[i]+"'>"+channelArr[i]+"</option>");
        }
        a=a+("</select></div>")
        return a;
    }

    /**
     * 添加具体开放信息
     */
    function insertMessage() {
        //获取实验室id
        var labId=$("#labId").val();
        //获取开放时间
        var beginTime=$("#datetimepicker-demo-").val();
        //获取结束天数
        var endTime=$("#datetimepicker-demo").val();
        //获取开始节次
        var sectionBegin=$("#sectionBegin").val();
        //获取结束节次
        var sectionEnd=$("#sectionEnd").val();
        //获取备注
        var remark=$("#remark").val();
        $.modal.loading("正在保存中......")
        //ajax添加
        $.ajax({
            url : prefix + "/againInsert",
            type : 'post',
            data : {
                id : labId,
                experimentBeginDate : beginTime,
                experimenEndtDate : endTime,
                sectionBegin : sectionBegin,
                sectionEnd : sectionEnd,
                remark : remark},
            success : function (data) {
                var result={"code":data.code,"msg":data.msg}
                $.operate.successCallback(result);
            }
        })
    }
</script>
</body>
</html>
